<template>
  <px-dialog v-model="isVisible" class="equip-dialog" title="选择故障设备" width="1200px" @open="openDialog" @close="closeDialog">
    <div class="equip-wrap-common">
      <px-form ref="queryRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="10" style="width: 100%">
          <px-col :span="6">
            <px-form-item label="设备名称/编码">
              <px-input
                v-model="queryParams.value"
                placeholder="请输入设备名称/编码"
                maxlength="50"
                @blur="queryParams.value = $event.target.value.trim()"
              />
            </px-form-item>
          </px-col>
          <!-- <px-col :span="6">
            <px-form-item label="地块">
              <px-select v-model="queryParams.facCode" placeholder="请选择地块" filterable clearable>
                <px-option v-for="item in facCodeList" :key="item.id" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col> -->
          <px-col :span="6">
            <px-form-item label="安装位置">
              <px-tree-select
                v-model="queryParams.positionCode"
                filterable
                clearable
                placeholder="请选择安装位置"
                :props="{
                  children: 'children',
                  label: 'name',
                  value: 'code'
                }"
                :data="positionCodeList"
                :render-after-expand="false"
                @focus="positionCodeFocus"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-table :data="tableData" class="equip-table" size="small" max-height="340px" border @selection-change="selectionChange">
        <px-table-column type="selection" min-width="40" align="center" />
        <!-- <px-table-column label="序号" width="50" /> -->
        <px-table-column prop="typeName" label="设备类型" min-width="120" show-overflow-tooltip />
        <px-table-column prop="eqpName" label="设备名称" min-width="200" show-overflow-tooltip />
        <px-table-column prop="eqpId" label="设备编码" min-width="120" show-overflow-tooltip />
        <px-table-column prop="specification" label="规格型号" min-width="160" show-overflow-tooltip />
        <px-table-column prop="positionNameAll" label="设备位置" min-width="160" show-overflow-tooltip />
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="tool-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <div style="margin-top: 16px; text-align: right">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit">确定</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { positionLedger, queryToolLedger } from "@/api/erc/equip";
import { computed, reactive, ref, toRefs } from "vue";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible", "typeCode", "facCode"]);

const isVisible = computed(() => props.visible);

const queryRef = ref();

const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableData: [],
  total: 0,
  selectedData: null,
  positionCodeList: []
});
const { queryParams, tableData, total, selectedData, positionCodeList } = toRefs(state);

// 安装位置聚焦时--存放
const positionCodeFocus = async () => {
  positionCodeList.value = await positionLedger({ facCode: props.facCode });
};

// 表格多选框选中
const selectionChange = (val: any) => {
  selectedData.value = val;
};

// 查询工具列表
const queryTable = async () => {
  const data = await queryToolLedger({ ...queryParams.value, typeCode: props.typeCode, facCode: props.facCode });
  tableData.value = data?.data || [];
  total.value = data?.total || 0;
};
// 重置筛选条件和工具列表
const resetTable = async () => {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 打开弹窗
const openDialog = () => queryTable();

// 查询列表关闭弹窗
const closeDialog = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 20
  };
  queryRef.value.resetFields();
  emits("closeDialog");
};

const handleSubmit = () => {
  emits("closeDialog", selectedData.value);
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/table-list.scss");

.equip-wrap-common {
  height: auto;
}
</style>
